<template>
  <CommonCard title="今日订单"  :value="orderToday |numberFormat">
    <template #chart>
      <!-- <div id="chart" style="width:100%; height:100%">
      </div> -->
      <!-- 引入echart后不再需要mounted和watch -->
      <v-chart :option="getOption()"/>
    </template>
    <template #bottom>
      <div>
        <span>昨日订单量</span>&nbsp;
        <span class="number">{{orderLastDay|numberFormat}}</span>
      </div>
    </template>
  </CommonCard>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'TodayOrders',
  computed: {
    /**
       * "//2": "今日订单量",
  "orderToday": 2562061,
  "orderLastDay": 2100000,
  "orderTrend": [610, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220],
  "orderTrendAxis": ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
       */
    ...mapState({
      orderToday: (state) => state.data.reportData.orderToday,
      orderLastDay: (state) => state.data.reportData.orderLastDay,
      orderTrend: (state) => state.data.reportData.orderTrend,
      //初始值是underfined 
      orderTrendAxis: (state) => state.data.reportData.orderTrendAxis || []
    }),   
  },
//    watch:{
//         orderTrendAxis(){//一旦有了数据就开始调用
//         //重新给chart设置option
//         this.chart.setOption(this.getOption())

//         }
//     },
  mounted() {
    //  初始化指定chart容器
    // this.chart = this.$echarts.init(document.getElementById('chart'))
    //判断一下orderTrendAxis有值的时候才设置chart选项
    // if(this.orderTrendAxis){
    // //设置选项
    //   this.chart.setOption(this.getOption())
    // }     
  },
  methods:{
      getOption(){
          return{           
            //X轴
            xAxis: {
                boundaryGap:false,//两侧不留白
                show: false, //不显示
                // data: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00'],
                data:this.orderTrendAxis
            },
            //Y轴
            yAxis: {
                show: false, //不显示
            },
            //系列
            series: [{
                name: '实时订单数',
                type: 'line',
                data: [610, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220],
                smooth:true,//平滑的
                areaStyle:{},//区域有颜色
                lineStyle:{//隐藏曲线
                    opacity:0
                },
                itemStyle:{//隐藏点
                    opacity:0
                },
                               
            }],
           
            //网格->包含图表的容器==>充满他容器  所以左右都显示为0
            grid: {
                left: 0,
                right:0,
                top:0,
                bottom:0,
            },
            //图表的颜色
            color:['#A64CA6'], 
            //提示框
            tooltip: {
                //轴线触发鼠标放在图上显示数据
                trigger: "axis",
            },
        
          }
      }
  }
}
</script>

<style lang="scss"scoped>
</style>